<template>

  <el-form label-position="right" label-width="170px">

    <el-form-item label="excel" class="item el-col-6">
      <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :on-change="handleChange"
        :file-list="searchForm.fileList"
        :limit="1"
        multiple
        :auto-upload="false"
        :on-exceed="handleExceed"
      >
        <el-button size="medium" type="success" @click="addSubmit">上传</el-button>
        <!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
        <!--:limit="1" 只能上传一个  -->
      </el-upload>
    </el-form-item>

    <el-button type="primary" @click="doSave" >保存</el-button>

  </el-form>

</template>




<script>

  import * as uploadService from '@/api/upload'

  export default {
    data() {
      return {
        searchForm: {
          fileList: [],
        }
      }
    },
    created() {

    },
    methods: {

      doSave() {
        if (this.searchForm.fileList.length == 0) {
          this.$alert("请上传文件!", {
            type: 'error',
            confirmButtonText: 'ok'
          });
          return;
        }


        let formData = new FormData();

        formData.append("file", this.searchForm.fileList[0].raw);

        uploadService.uploadFile(formData).then(() =>{
          this.$alert("文件上传成功!", {
            type: 'success',
            confirmButtonText: 'ok'
          });

          this.searchForm.fileList = [];
        });

      },


      //上传成功调用
      onUploadSuccess() {

      },

      handlePreview(file) {
        console.log(file);
      },

      handleRemove(file, fileList) {
        console.log(file, fileList);
      },

      beforeRemove(file, fileList) {
        return this.$confirm(`Confirm deleted ${ file.name }？`);
      },

      handleChange(file, fileList) {
        this.searchForm.fileList = fileList;
      },

      handleExceed(files, fileList) {
        this.$message.warning(`一次只能上传一个文件`);
      },

      addSubmit() {
        console.log("addSubmit");
      },
    }

  }
</script>

<style scoped>

</style>
